<template>
    <div class="conter">
        <el-form ref="form" class="title"  style="margin-bottom: 50px">
            <el-form-item style="font-size: 32px;color: #333333;height: 40px;line-height: 40px;width: 100%">
                {{details.cuVolunteersTitle}}
            </el-form-item>
            <el-form-item style="font-size: 24px;color: #999999;float: left;">{{details.cuVolunteersContact}}</el-form-item>
            <el-form-item style="font-size: 24px;color: #999999;float: right;">{{details.cuVolunteersStartDate}}</el-form-item>
            <div style="clear: both"></div>
            <el-form-item style="font-size: 32px">
                活动简介:{{details.cuVolunteersIntroduction}}
            </el-form-item>
            <el-form-item >
                招募人数:{{details.cuVolunteersCountRecruiting}}
            </el-form-item>
            <el-form-item >
                招募地点:{{details.cuVolunteersAddress}}
            </el-form-item>
            <el-form-item >
                招募截止时间:{{details.cuVolunteersStop}}
            </el-form-item>
            <el-form-item >
                招募开展时间:{{details.cuVolunteersStartDate}}
            </el-form-item>
            <el-form-item>
                报名限制:{{details.cuVolunteersLimit}}
            </el-form-item>
            <el-form-item >
                活动内容:
                <div v-html="details.cuVolunteersServiceContent"></div>
            </el-form-item>
            <el-form-item >
                <el-image :src="details.cuVolunteersImg"></el-image>
            </el-form-item>
        </el-form>
        <el-button @click="submit" style="width: 100%;height: 44px;font-size: 16px;color: white;background-color: #22C782">立即报名</el-button>
    </div>
</template>

<script>
    export default {
        name: "volunteers",
        data() {
            return {
                details: {},
                bo: {
                    cuUserId: null,
                    code: null
                }
            }
        },
        methods: {
            queryDetails() {
                this.$axios.post("cu-volunteers/queryDetails", {cuVolunteersId: this.bo.code}).then((response) => {
                    if (response.data.code === 0){
                        this.details = response.data.data;
                    }
                });
            },
            submit(){
                this.openLoadingView();
                this.$axios.post("cu-volunteers/volunteersSign", {cuVolunteersId: this.bo.code,cuUserId:this.bo.cuUserId}).then((response) => {
                    if (response.data.code === 0){
                        let u = navigator.userAgent;
                        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android
                        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                            if (isAndroid) {
                                window.android.applyForVolunteerSuccess();
                            }
                            if (isIOS) {
                                window.webkit.messageHandlers.applyForVolunteerSuccess.postMessage({"id":1});
                                this.$message.success("ios调用后")
                            }
                    }
                })
                }
        },
        mounted() {
            if (!this.$route.params.code) {
                this.$alert('<span style="vertical-align: middle;">非法进入</span> ', '提示', {
                    showCancelButton: false,
                    showConfirmButton: false,
                    dangerouslyUseHTMLString: true,
                    beforeClose: () => {

                    }
                });

            } else {
                let answer = this.$route.params.code.split("-");
                if (answer.length != 2) {
                    this.$alert('<span style="vertical-align: middle;">非法进入</span> ', '提示', {
                        showCancelButton: false,
                        showConfirmButton: false,
                        dangerouslyUseHTMLString: true,
                        beforeClose: () => {

                        }
                    });
                } else {
                    this.bo.code = answer[0];
                    this.bo.cuUserId = answer[1];
                    this.queryDetails();
                }
            }
        }
    }
</script>

<style scoped>

</style>
<style>
    .conter img{
        max-width: 100%;
    }
</style>